import React, { memo, useEffect, useState } from "react";
import { RightWrapper } from "./style";
import IconGlobal from "@/assets/svg/icon_global";
import IconMenu from "@/assets/svg/icon_menu";
import IconAvatar from "@/assets/svg/icon_avatar";

const HeaderRight = memo(() => {
    // 定义组件内部状态
    const [showPanel, setShowPanel] = useState(false);

    // 副作用代码
   useEffect(() => {
    const handleClick = () => {
        setShowPanel(false);
    };

    // 使用冒泡阶段的事件监听
    window.addEventListener('click', handleClick);

    // 清理副作用函数
    return () => {
        window.removeEventListener('click', handleClick);
    };
}, []);
    // 点击个人中心
    const handleProfileClick = (event) => {
        event.stopPropagation();
        setShowPanel(!showPanel);
    };

    return (
        <RightWrapper>
            <div className="btns">
                <span className="btn">登录</span>
                <span className="btn">注册</span>
                <span className="btn">
                    <IconGlobal />
                </span>
            </div>

            <div className="profile" onClick={handleProfileClick}>      
                <IconMenu />
                <IconAvatar />
                {showPanel && (<div className="panel">
                    <div className="top">
                        <div className="item regist">注册</div>
                        <div className="item login">登录</div>
                    </div>
                    <div className="bottom">
                        <div className="item">出租房源</div>
                        <div className="item">开展体验</div>
                        <div className="item">帮助</div>
                    </div>
                </div>)}
            </div>
        </RightWrapper>
    );
});

export default HeaderRight;